<template>
  <div style="padding:20px">
      <h2>深入v-model</h2>
      <!-- 双向数据绑定 -->
      <input type="text" v-model="msg">
      <span>{{msg}}</span>
      <br>
      <!-- 不用v-model实现双向数据绑定 -->
      <input type="text" :value="msg" @input="msg = $event.target.value">
      <!-- change事件需要blur一下才会触发 -->
      <input type="text" :value="msg" @change="msg = $event.target.value">
      <span>{{msg}}</span>

      <!-- v-model实现父子组件数据同步（父子间通信）,此处的$event就是子组件给父组件传递的值 -->
      <!-- <son :value="msg" @input="msg = $event"/> -->
      <!-- 简写 ，此处的v-model是相当于给子组件传递props-->
      <son v-model="msg"/>
  </div>
</template>

<script>
import Son from '@/pages/test/v-model/Son'
export default {
    name:'Father',
    components:{Son},
    data(){
        return{
            msg:'你好啊'
        }
    }
}
</script>

<style>

</style>